<template>
  <div class="post">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <a class="btn btn-light" @click.prevent="$router.go(-1)">返回</a>
          <PostFeed :post="postData" :showAction="false"/>

          <CommentForm
            v-if="postData !=null"
            :postId="postData._id"
            @update="getPost(postData._id)"
          />
          <!-- 展示点赞内容 -->
          <CommentFeed
            v-for="(comment, index) in postData.comments"
            :key="index"
            :postId="postData._id"
            :comment="comment"
            @update="getPost(postData._id)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PostFeed from "./PostFeed";
import CommentForm from "./CommentForm";
import CommentFeed from "./CommentFeed";
export default {
  data() {
    return {
      postData: {},
      errors: {}
    };
  },
  methods: {
    getPost(id) {
      this.$axios
        .get(`http://localhost:5000/api/posts/${id}`)
        .then(res => {
          this.postData = res.data;
          this.errors = null;
          console.log(this.postData);
        })
        .catch(err => {
          this.postData = null;
          this.errors = err.response.data;
        });
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //   console.log(to);

      vm.getPost(to.params.id);
    });
  },
  components: {
    PostFeed,
    CommentForm,
    CommentFeed
  }
};
</script>

